<template>
  <el-dropdown trigger="click" @command="changeLanguage">
    <div class="size-icon--style">
      <svg-icon class-name="web-icon" icon-class="language"/>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="appStore.language === 'zh'" command="zh">中文</el-dropdown-item>
        <el-dropdown-item :disabled="appStore.language === 'en'" command="en">English</el-dropdown-item>
        <el-dropdown-item :disabled="appStore.language === 'vi'" command="vi">Tiếng Việt</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
import useAppStore from '@/store/modules/app'

const appStore = useAppStore()
const { locale } = useI18n()

const changeLanguage = (lang) => {
  appStore.setLanguage(lang)
  locale.value = lang
}
locale.value = appStore.language
</script>

<style scoped lang="scss">
.size-icon--style {
  font-size: 18px;
  line-height: 50px;
  padding-right: 7px;
}
</style>